<template>
  <el-form-item label="轮播图">
    <div class="swiper-editor">
      <div class="swiper-list">
        <draggable v-model="editorForm.swiper.value" :animation="150" item-key="id" handle=".swiper-item"
          class="swiper-draggable-list">
          <template #item="{ element, index }">
            <div class="swiper-item" @mouseenter="activeIndex = index" @mouseleave="activeIndex = null">
              <img :src="element.image" />
              <div class="format-box-mask" v-show="activeIndex === index">
                <el-button-group>
                  <el-button size="small" :icon="Delete" @click="handleDelete(index)" />
                  <el-button size="small" :icon="Edit" @click="handleEdit(element, index)" />
                </el-button-group>
              </div>
            </div>
          </template>
        </draggable>
        <div class="swiper-item" @click="handleAdd">
          <el-icon :size="24">
            <Plus />
          </el-icon>
        </div>
      </div>
      <el-dialog v-model="dialogShow" title="添加轮播图" width="520px" align-center @close="resetForm">
        <el-form ref="swiperFormRef" :model="swiperForm" label-width="80px" label-position="right">
          <el-form-item label="跳转链接" prop="url">
            <el-radio-group v-model="linkType" @change="changeLink">
              <el-radio :label="1">无链接</el-radio>
              <el-radio :label="2">指定链接</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="linkType === 2" label="跳转链接" prop="url">
            <el-input v-model="swiperForm.url" placeholder="请输入跳转链接" />
          </el-form-item>
          <el-form-item label="是否启用">
            <el-radio-group v-model="swiperForm.isUse">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="打开位置">
            <el-radio-group v-model="swiperForm.open">
              <el-radio label="self">当前窗口</el-radio>
              <el-radio label="_blank">新窗口</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="样式类型" prop="type">
            <el-radio-group v-model="swiperForm.type">
              <el-radio :label="1">图片</el-radio>
              <el-radio :label="3">图片+前景图</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="图片" prop="image">
            <div class="form-img" @click="handleUpload('image')">
              <div class="has-img" v-if="swiperForm.image">
                <img :src="swiperForm.image" alt="" />
                <span @click.stop="handleRemoveImg('image')">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </span>
              </div>
              <el-icon v-else>
                <Plus />
              </el-icon>
            </div>
          </el-form-item>
          <el-form-item v-if="swiperForm.type === 3" label="前景图" prop="frontImage">
            <div class="form-img" @click="handleUpload('frontImage')">
              <div class="has-img" v-if="swiperForm.frontImage">
                <img :src="swiperForm.frontImage" alt="" />
                <span @click.stop="handleRemoveImg('frontImage')">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </span>
              </div>
              <el-icon v-else>
                <Plus />
              </el-icon>
            </div>
          </el-form-item>
          <el-form-item v-if="swiperForm.type === 3" label="前景图位置" prop="frontPosition">
            <el-select v-model="swiperForm.frontPosition" placeholder="请选择">
              <el-option v-for="(item, index) in positionList" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input v-model="swiperForm.description" type="textarea" :rows="3" placeholder=""></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogShow = false">取消</el-button>
            <el-button type="primary" @click="handleConfirm">确认</el-button>
          </span>
        </template>
      </el-dialog>
      <FilesUpload v-model:showDialog="showBackImageUpload" :limit="1" @getFileList="handleGetCoverImg" />
    </div>
  </el-form-item>
</template>

<script setup>
import { ref, inject, reactive, watch } from 'vue'
import { Edit, Delete, Plus } from '@element-plus/icons-vue'
import draggable from 'vuedraggable'

const { editorForm, backUpdate } = inject('commonForm')
watch(() => editorForm.value.swiper, () => {
  backUpdate()
}, { deep: true })
const activeIndex = ref(null)
// 前景图位置
const positionList = reactive([
  { label: '上', value: 'top' },
  { label: '下', value: 'bottom' },
  { label: '左', value: 'left' },
  { label: '右', value: 'right' },
  { label: '居中', value: 'center' }
])
// 添加链接
const dialogShow = ref(false)
const optionWay = ref('add')
const optionIndex = ref(null)
const swiperFormRef = ref(null)
const defaultSwiperForm = reactive({
  url: '',
  image: '',
  open: 'self',
  isUse: true,
  type: 1,
  frontImage: '',
  frontPosition: 'center'
})
const swiperForm = ref(Object.assign({}, defaultSwiperForm))
const handleAdd = () => {
  optionWay.value = 'add'
  dialogShow.value = true
}
const handleEdit = (row, index) => {
  optionWay.value = 'edit'
  optionIndex.value = index
  swiperForm.value = Object.assign({}, row)
  if (row.url === 'javascript:;') {
    linkType.value = 1
  } else {
    linkType.value = 2
  }
  dialogShow.value = true
}
const handleDelete = index => {
  editorForm.value.swiper.value.splice(index, 1)
}
const handleConfirm = () => {
  if (optionWay.value === 'edit') {
    editorForm.value.swiper.value[optionIndex.value] = swiperForm.value
  } else {
    swiperForm.value.id = `swiper-${editorForm.value.swiper.value.length}-${Date.now()}`
    editorForm.value.swiper.value.push(swiperForm.value)
  }
  dialogShow.value = false
}
const resetForm = () => {
  swiperFormRef.value.clearValidate()
  swiperForm.value = Object.assign({}, defaultSwiperForm)
}
// 添加图片
const showBackImageUpload = ref(false)
const curField = ref('')
const handleUpload = key => {
  curField.value = key
  showBackImageUpload.value = true
}
const handleGetCoverImg = imgList => {
  swiperForm.value[curField.value] = imgList[0].url
}
// 移除图片
const handleRemoveImg = key => {
  swiperForm.value[key] = ''
}
const linkType = ref(1)
const changeLink = val => {
  if (val === 1) {
    swiperForm.value.url = 'javascript:;'
  } else {
    swiperForm.value.url = ''
  }
}

// 确保每个轮播图项都有唯一的 id
const ensureIds = () => {
  editorForm.value.swiper.value.forEach((item, index) => {
    if (!item.id) {
      item.id = `swiper-${index}-${Date.now()}`
    }
  })
}
ensureIds()
</script>

<style lang="scss" scoped>
.swiper-editor {
  width: 100%;

  .swiper-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;

    .swiper-draggable-list {
      display: contents; // 这会保持网格布局
    }

    .swiper-item {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      margin-top: 10px;
      width: 100%;
      height: 70px;
      border: 1px solid #f2f2f2;
      overflow: hidden;
      cursor: pointer;

      img {
        width: 100%;
        height: 70px;
        object-fit: contain;
      }

      .format-box-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: opacity 0.3s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba($color: #000000, $alpha: 0.2);
      }

      &:hover {
        border: 1px solid $mainColor;
      }
    }
  }

  .form-img {
    height: 100px;
    width: 150px;
    border: 1px dashed $borderColor;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    .has-img {
      height: 100%;
      width: 100%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        max-width: 100%;
        max-height: 100%;
      }

      span {
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        background-color: $failColor;
        height: 20px;
        width: 20px;
        font-size: 18px;
        color: #fff;
      }

      &:hover {
        span {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}

.custom-next {
  width: 100%;
  padding-left: 80px;
}

.custom-after {
  display: inline-block;
  margin-left: 5px;
}

.el-radio-group .el-radio {
  margin-right: 8px;
}

::v-deep .font-checkbox.el-checkbox .el-checkbox__input {
  display: none;
}
</style>